<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styles.css">
    <title>Horizons Offices</title>
</head>
<body>
    <!-- Page navigation -->
    <nav>
        <a href=""><img src="./images/logo.png" alt="Horizon Offices"></a>
        <div class="flags">
            <a href="#"><img src="./images/flags/gh.svg" alt="Ghana"></a>
            <a href="#"><img src="./images/flags/ng.svg" alt="Nigeria"></a>
            <a href="#"><img src="./images/flags/ke.svg" alt="Kenya"></a>
        </div>
        <a href="#">About Us</a>
    </nav>
    <!-- Main body -->
    <main>
        <!-- Carousel -->
        <div class="carousel">
            <div id="left-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="25.787" height="43.089" viewBox="0 0 25.787 43.089">
                    <path id="chevron-left" class="cls-1" d="M1369.6-193.042l-19.423,19.423L1369.6-154.2" transform="translate(-1345.939 195.163)"/>
                </svg>                  
            </div>
            <div id="right-arrow">
                <svg xmlns="http://www.w3.org/2000/svg" width="25.787" height="43.089" viewBox="0 0 25.787 43.089">
                    <path id="chevron-right" class="cls-1" d="M1350.182-193.042l19.423,19.423L1350.182-154.2" transform="translate(-1348.061 195.163)"/>
                </svg>                  
            </div>
            <div class="indicators">
                <button id="1" class="active"></button>
                <button id="2"></button>
                <button id="3"></button>
                <button id="4"></button>
            </div>
            <div class="images">
                <img src="./images/carousel/sean-pollock-PhYq704ffdA-unsplash.jpg" alt="image1" class="active">
                <img src="./images/carousel/chris-barbalis-apqP8Ape8YA-unsplash.jpg" alt="image2">
                <img src="./images/carousel/sasha-pleshco_-nBRHY7YZ3M0-unsplash.jpg" alt="image3">
                <img src="./images/carousel/li-lin-YlKQqhaNRZQ-unsplash.jpg" alt="image4">
            </div>
        </div>
        <!-- rest of body -->
        <sub>
            <h2>plans</h2>
            <div class="thumbnails">
                <div class="thumb">
                    <img src="./images/thumb/alesia-kazantceva-XLm6-fPwK5Q-unsplash.jpg" alt="virtual offices">
                    <section>
                        <h3>Virtual Offices</h3>
                        <p>Our virtual offices allow your business to get our location address phone services, and also make you become a member of our community with benefits such as access to our meeting rooms</p>
                    </section>
                </div>
                <div class="thumb">
                    <img src="./images/thumb/yann-maignan-rRiAzFkJPMo-unsplash.jpg" alt="customized offices">
                    <section>
                        <h3>Customized Offices</h3>
                        <p>Our customized offices offer you the liberty to customize the entire office to suit your taste and preference</p>
                    </section>
                </div>
                <div class="thumb">
                    <img src="./images/thumb/adolfo-felix-PG8NyM_Mcts-unsplash.jpg" alt="serviced offices">
                    <section>
                        <h3>Serviced Offices</h3>
                        <p>Our serviced offices offer a great location for your business, internet connectivity, utilities, among others</p>
                    </section>
                </div>
                <div class="thumb">
                    <img src="./images/thumb/nastuh-abootalebi-eHD8Y1Znfpk-unsplash.jpg" alt="meeting rooms">
                    <section>
                        <h3>Meeting Rooms</h3>
                        <p>Our meeting rooms offer a great location for your meeting with your clients or business partners. We provide presentation equipment and coffee. You also get to become a member of our community with benefits including access to our meeting rooms.</p>
                    </section>
                </div>
            </div>
        </sub>
    </main>
    <!-- Footer -->
    <footer>
        <div class="option">
            <h3>Visit us in Kenya</h3>
            <h4>Nairobi, Kenya</h4>
            <p>Belgravia Centre, 14 Riverside Drive,<br>4th Floor, Off Riverside Drive<br>Hanover Centre, 14 Riverside Drive<br>6th Floor, Off Riverside Drive</p>
        </div>
        <div class="option">
            <h3>Visit us in Ghana</h3>
            <h4>Accra, Ghana</h4>
            <p>8th Floor, One Airport Square, Airport City</p>
        </div>
        <div class="option">
            <h3>Visit us in Nigeria</h3>
            <h4>Lagos, Nigeria</h4>
            <p>Sterling Bank Building</p>
        </div>
    </footer>

    <script src="./script.js"></script>
</body>
</html>